import { Button, Form, Input } from "antd";

import { useNavigate } from "react-router-dom";
import styles from "./index.module.scss";
type FieldType = {
	username?: string;
	password?: string;
	remember?: string;
	rePassword?: string;
};
const Index = () => {
	const navigate = useNavigate();
	const onFinish = (values: any) => {
		delete values.rePassword;
		console.log("Success:", values);
	};

	const onFinishFailed = (errorInfo: any) => {
		console.log("Failed:", errorInfo);
	};

	return (
		<div className={styles.root}>
			<div className="wrap">
				<div className="form">
					<h4 className="title">登录账户</h4>
					<Form
						name="basic"
						style={{ maxWidth: 600 }}
						layout="vertical"
						initialValues={{ remember: true }}
						onFinish={onFinish}
						onFinishFailed={onFinishFailed}
						autoComplete="off">
						<Form.Item<FieldType>
							label="用户名"
							name="username"
							rules={[{ required: true, message: "用户名不能为空" }]}>
							<Input size="large" width={300} placeholder="请输入用户名" />
						</Form.Item>

						<Form.Item<FieldType>
							label="密码"
							name="password"
							rules={[{ required: true, message: "密码不能为空" }]}>
							<Input.Password
								size="large"
								width={300}
								placeholder="请输入密码"
							/>
						</Form.Item>

						<Form.Item>
							<Button
								type="primary"
								htmlType="submit"
								size="large"
								className="regbtn">
								登录
							</Button>
						</Form.Item>
					</Form>
					<div className="link">
						<span>还没有账号？马上去</span>
						<Button
							type="link"
							onClick={() => {
								navigate("/register");
							}}>
							注册
						</Button>
					</div>
				</div>
				{/* <div className="left"></div>
				<div className="right"></div> */}
			</div>
		</div>
	);
};

export default Index;
